{extend name='common/common' /}
{block name="style"}
<style media="screen">
#treeBox{
	max-height: 600px;
	overflow: auto;
}
.contextmenu{
	background: #2f4050;
	width: 120px;
	position: absolute;
	z-index: 9999;
	display: none;
	padding:0;
	box-shadow: 3px 3px 3px #888888;
	min-height: 144px;
}
.contextmenu li {
	list-style-type:none;
	color:#a7b1c2;
	border-bottom: 1px solid #a7b1c2;
	padding:8px;
	font-size: 14px;
}
.contextmenu li:hover{
	color: #FFF;
	cursor: pointer;
	border-left:4px solid #19aa8d
}
#main .filterText{
	width: 217px;
}
</style>
{/block}
{block name="content"}
<el-col :lg="12">
	<el-card class="box-card">
		<div slot="header">
			<span class="span-primary"><i class="fa fa-tree"></i></span>
			部门结构
			{if authCheck('department/departadd')}
			<el-button type="primary" class="header-btn" @click="addTopDepart" plain size="small">添加顶级部门</el-button>
			{/if}
		</div>
		<el-input
		  placeholder="输入关键字进行过滤"
		  v-model="filterText" class="filterText">
		</el-input>
		<div id="treeBox">
			<el-tree :data="treeData" node-key="id"
				ref="tree"
				:props="props"
				:default-expanded-keys="exkeys"
				:filter-node-method="filterNode"
				@node-contextmenu="contextmenu">
			</el-tree>
		</div>
	</el-card>
</el-col>
<ul id="contextmenu" class="contextmenu">
	{if authCheck('department/departadd')}
	<li @click="addSubDepart"><i class="fa fa-plus"></i> 添加子部门</li>
	{/if}
	{if authCheck('department/departedit')}
	<li @click="editDepart"><i class="fa fa-edit"></i> 编辑部门</li>
	{/if}
	{if authCheck('department/departedit')}
	<li @click="ChangePid"><i class="fa fa-level-up"></i> 更改所属</li>
	{/if}
	{if authCheck('department/departdel')}
	<li @click="delDepart"><i class="fa fa-trash-o"></i> 删除部门</li>
	{/if}
	<li><i class="fa fa-ban"></i> 取消操作</li>
</ul>
{/block}
{block name="component"}
<div id="deparTreeBox">
	<el-dialog title="选择部门" :visible.sync="showDeparTree" top="5vh">
		<div class="treeBox">
			<el-tree
				:data="deparTreeData"
				:props="props"
				ref="deparTree"
				show-checkbox
				node-key="id"
				check-strictly="true"
				@check-change="toRadio">
			</el-tree>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showDeparTree = false">取消</el-button>
			<el-button type="success" @click="sureDepart">保存</el-button>
		</div>
	</el-dialog>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
			treeData:'',
			props:{
				label:"name",
			},
			operateNode:'',
			filterText: '',
			exkeys:[],
		}
	},
	mounted:function() {
		this.getTreeData();
	},
	watch: {
		filterText(val) {
		this.$refs.tree.filter(val);
		}
    },
	methods:{
		getTreeData() {
			this.loading = true;
			$.getJSON("{:url('department/index')}",function(res){
				main.loading = false;
				main.treeData = res.data;
				main.exkeys = res.exkeys;
			});
		},
		contextmenu($event,data) {
			this.operateNode=data
			$(".contextmenu").hide();
			$(".contextmenu").css({
				"display":"block",
				"top":$event.clientY+"px",
				"left":$event.clientX+"px"
			});
		},
		addSubDepart() {
			this.$prompt('请输入部门名称',
				'添加“'+this.operateNode.name+"”的子部门", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '请输入部门名称'
			}).then(({ value }) => {
				$.post('./departAdd',{
					"pid":main.operateNode.id,
					"name":value
				},function(res){
					if(res.code != 1){
						main.$notify.error({
							title: '错误',
							message: res.msg
						});
					}else{
						main.$notify({
							title: '成功',
							message: res.msg,
							type: 'success'
						});
						main.getTreeData();
					}
				})
			}).catch(() => {});
		},
		addTopDepart() {
			this.$prompt('请输入部门名称',
				"添加顶级部门", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '请输入部门名称'
			}).then(({ value }) => {
				$.post('./departAdd',{
					"pid":0,
					"name":value
				},function(res){
					if(res.code != 1){
						main.$notify.error({
							title: '错误',
							message: res.msg
						});
					}else{
						main.$notify({
							title: '成功',
							message: res.msg,
							type: 'success'
						});
						main.getTreeData();
					}
				})
			}).catch(() => {});
		},
		editDepart() {
			this.$prompt('请输入部门名称',
				'编辑“'+this.operateNode.name+"”部门", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '请输入部门名称'
			}).then(({ value }) => {
				$.post('./departEdit',{
					"id":main.operateNode.id,
					"name":value
				},function(res){
					if(res.code != 1){
						main.$notify.error({
							title: '错误',
							message: res.msg
						});
					}else{
						main.$notify({
							title: '成功',
							message: res.msg,
							type: 'success'
						});
						main.getTreeData();
					}
				})
			}).catch(() => {});
		},
		delDepart() {
			var tips = "删除“"+this.operateNode.name+"”后不可恢复，确定继续吗？";
			main.$confirm(tips, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				if(main.operateNode.children){
					main.$notify.error({
						title: '错误',
						message: '该部门下有子部门，不可删除'
					});
					return false;
				}
				$.post("./departDel",{
					id:main.operateNode.id
				},function(res){
					if(res.code != 1){
						main.$notify.error({title: '错误',message: res.msg});
					}else{
						main.$notify({title: '成功',message: res.msg,type: 'success'});
						main.getTreeData();
					}
				})
			}).catch(() => {
				main.$notify.info({
					title: '消息',
					message: "删除已取消"
				});
			});
		},
		ChangePid() {
			deparTree.showDeparTree = true;
			$.getJSON("{:url('department/index')}",function(res){
				res.data.unshift({'id':0,'pid':0,'name':'顶级部门'});
				deparTree.deparTreeData = res.data;
			})
		},
		filterNode(value, data) {
	        if (!value) return true;
	        return data.name.indexOf(value) !== -1;
      	}
	}
});
var deparTree = new Vue({
	el:"#deparTreeBox",
	data() {
		return {
			showDeparTree:false,
			deparTreeData:'',
			checkedTimes:0,
			props:{
				label:"name"
			}
		}
	},
	methods:{
		sureDepart() {
			this.showDeparTree = false;
			if(this.$refs.deparTree.getCheckedKeys().length == 0){
				main.$notify.error({
					title: '错误',
					message: "请选择所属部门"
				});
				return false;
			}else if (deparTree.$refs.deparTree.getCheckedKeys()[0] == main.operateNode.id){
				main.$notify.error({
					title: '错误',
					message: "不能选择自己本身"
				});
				return false;
			}
			$.post("./departEdit",{
				id:main.operateNode.id,
				pid:deparTree.$refs.deparTree.getCheckedKeys()[0]
			},function(res){
				if(res.code != 1){
					main.$notify.error({
						title: '错误',
						message: res.msg
					});
				}else{
					main.$notify({
						title: '成功',
						message: res.msg,
						type: 'success'
					});
					main.getTreeData();
				}
			})
		},
		toRadio(data,checked, node) {
			this.checkedTimes++;
			if(this.checkedTimes%2==0){
			   if(checked){
				   this.$refs.deparTree.setCheckedNodes([]);
				   this.$refs.deparTree.setCheckedNodes([data]);
			   }else{
				   this.$refs.deparTree.setCheckedNodes([]);
			   }
			}
		}
	}
})
$(document).on("click",function(){
	$(".contextmenu").hide();
})
</script>
{/block}
